﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>API</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/pub.css" rel="stylesheet" />
    <script src="../bootstrap/js/jquery.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../bootstrap/js/bootstrap-paginator.js"></script>
    <!--[if lt IE 9]>
        <script src="bootstrap/js/html5shiv.min.js"></script>
        <script src="bootstrap/js/respond.min.js"></script>
    <![endif]-->
    <script src="../config.js"></script>
    <script src="../bootstrap/js/Common.js"></script>
    <script src="../bootstrap/js/controls.js"></script>
    <script type="text/javascript">
        var select;
        $(function () {
            $.ajax({
                url: host_name + "terminal/list",
                type: "post",
                data: JSON.stringify({pagesize: 100, pageindex: 1}),
                success: function (data) {
                    var html = '<a href="#"class="list-group-item active">选择终端</a>';
                    $.each(data,
                        function (i) {
                            html += '<a href="javascript:void(0);" onclick="ChangeTerminal(\'' + data[i].terminalID + '\')" class="list-group-item" >' + data[i].name + '(' + data[i].terminalID + ')</a>';
                        });
                    $("#terminalList").html(html);
                    select = data[0].terminalID;
                    init(select, 1)
                }
            });
        });
        //初始化
        function init(select, pgindex) {
            //菜单
            var menus = [
            ];
            $(".menu-container").menu({ items: menus });
            //列表
            var columns = [
                { name: "接入点编号", field: "accessPointID" },
                { name: "路径", field: "fullPath" },
                //{ name: "扩展信息", field: "ext" },
                {
                    name: "操作", field: "accessPointID",
                    title: '操作',
                    formatter: function (value) {
                        return '<a href="javascript:void(0);" onclick="Reset(\'' + value + '\')" class="btn btn-sm btn-info" ><i class="fa fa-trash-o"></i>重置</a>';    
                    }
                }
            ];
            //选中的设备ID参数
            var param = { terminalId: select, pagesize: pagesize, pageindex: pgindex };
            $("#tab").datagrid({ columns: columns, dblclick: void (0) }).loadData(host_name + "terminalaccesspoint/list", "post", param, function () {
                //获取页数
                $.ajax({
                    url: host_name + "terminalaccesspoint/count?terminalId=" + select,
                    type: "get",
                    success: function (data) {
                        if (data < 10) {
                            $("#example").hide();
                        }
                        else {
                            $("#example").show();
                            var totalcount = Math.ceil(data / pagesize)
                            //初始化分页
                            $('#pageLimit').bootstrapPaginator({
                                currentPage: pgindex,
                                totalPages: totalcount,//总页数
                                numberOfPages: pagenum,//显示页数
                                size: "normal",
                                bootstrapMajorVersion: 3,
                                alignment: "right",
                                itemTexts: function (type, page, current) {
                                    switch (type) {
                                        case "first": return "首页";
                                        case "prev": return "上一页";
                                        case "next": return "下一页";
                                        case "last": return "末页";
                                        case "page": return page;
                                    }//默认显示的是第一页。
                                },
                                onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
                                    init(select, page);
                                }
                            });
                        }
                    }
                });
            });
        }
        //重置
        function Reset(apId) {
            $.ajax({
                url: cmd_url +"IOVar/" + select,
                type: "post",
                data: { "action": 2, "variableid": apId },
                success: function (data) {
                    if (data && data.code == 200) {
                        alert("重置成功！");
                    }
                    else {
                        alert("重置失败！");
                    }
                },
                error: function (request) {
                    alert("连接失败");
                }
            });
        }
        //刷新
        function refresh() {
            init(select);
        }
        //下拉菜单切换
        function ChangeTerminal(val) {
            select = val;
            init(select,1);
        }
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">
                <div class="row" id="terminalList">
                </div>
            </div>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>接入点列表</h4>
                    </div>
                    <div class="col-xs-6">
                        <div class="menu-container pull-right">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 table-responsive">
                        <table id="tab" class="table table-bordered table-hover"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-right: 10px;">
            <div id="example" style="text-align: right">
                <ul id="pageLimit"></ul>
            </div>
        </div>
    </div>
</body>
</html>

